<template>
  <div class="top_nav">
    <div class="w8 rb">
      <div class="TNText ff">
        <i v-if="leftNav.length <= 0 || leftNav == null">校园二手书</i>
        <template v-else v-for="item in leftNav">
          <i class="NRText hover" @click="goto(item.url)">{{ item.name }}</i>
        </template>
      </div>
      <div class="TNText ff">
        <template v-for="(nav, index) in rightNav">
          <li
            v-if="nav.code != 'logout'"
            class="NRText hover"
            @click="goto(nav, index)"
          >
            {{ nav.name }}
          </li>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // "登录/注册", "消息", "购物车", "我的订单", "个人中心", "客服"
      rightNav: [
        {
          name: "登录/注册",
          url: "/login",
          code: "login",
        },
        {
          name: "购物车",
          url: "/cart",
          code: "cart",
        },
        {
          name: "我的订单",
          url: "/order",
          code: "",
        },
        {
          name: "个人中心",
          url: "/personal",
          code: "personal",
        },
      ],
      leftNav: [
        // {
        //   name: "首页",
        //   url: "home",
        // },
        // {
        //   name: "书店",
        //   url: "",
        // },
      ],
      userId: 0,
    };
  },
  // mounted() {
  //   console.log("mounted:userId", this.$store.state.user.user.userId);
  //   if (this.$store.state.user.user.userId) {
  //     this.rightNav[0].name = "退出";
  //   } else {
  //     this.rightNav[0].name = "登录/注册";
  //   }
  // },
  // computed: {
  //   userId: function () {
  //     console.log(
  //       "computed           this.$store.state.user.user.userId=",
  //       this.$store.state.user.user.userId
  //     );
  //     if (this.$store.state.user.user.userId) {
  //       return this.$store.state.user.user.userId;
  //     }
  //     return 0;
  //   },
  // },
  mounted() {
    this.userId = this.$store.state.user.user.userId;

    if (this.$store.state.user.user.userId) {
      this.rightNav[0].name = "退出";
    } else {
      this.rightNav[0].name = "登录/注册";
    }
  },
  // watch: {
  //   userId: {
  //     change(value) {
  //       console.log("watch  userId=", value);

  //       if (this.$store.state.user.user.userId) {
  //         this.rightNav[0].name = "退出";
  //       } else {
  //         this.rightNav[0].name = "登录/注册";
  //       }
  //       // if (value) {
  //       //   this.rightNav[0].name = "退出";
  //       // } else {
  //       //   this.rightNav[0].name = "登录/注册";
  //       // }
  //     },
  //     immediate: true,
  //   },
  // },
  methods: {
    goto(item, index) {
      if (index == 0) {
        if (item.name == "退出") {
          this.$store.commit("user/deleteUser");
          console.log("deleteUser:userId", this.$store.state.user.user.userId);
        } else {
          this.$router.push(item.url);
        }
      } else {
        console.log("goto:item", item);
        this.$router.push(item.url);
      }
      if (this.$store.state.user.user.userId) {
        this.rightNav[0].name = "退出";
      } else {
        this.rightNav[0].name = "登录/注册";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.top_nav {
  position: relative;
  background-color: rgb(38, 34, 34);
  .TNText {
    color: rgb(229, 211, 211);
    line-height: 3;
    font-size: 10px;
    font-weight: 500;
  }
  .ff {
    display: flex;
    flex-flow: row nowrap;
    .NRText {
      margin-right: 10px;
    }
  }
}
</style>